<template>
<!--我的音乐登录信息展示-->
  <div class="myhead">
    <div class="imghead">
      <img :src="avatarUrl" alt />
      <p>{{nickname}}</p>
      <div class="info">
        <span>关注 {{attentionNumber}}</span>
        <span>粉丝 {{fansNumber}}</span>
        <p>签名：{{signature}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import require from "requests/index";
export default {
  name: "myhead",
  data() {
    return {
      nickname:null,
      attentionNumber:0, //关注数量
      fansNumber:0, //粉丝数量
      avatarUrl:null,
      signature:'你什么都没写'
    };
  },
  methods: {
    getInfo() {
      require.getInfo(this.$store.state.userId).then(res => {
          this.attentionNumber=res.data.profile.follows
          this.fansNumber=res.data.profile.followeds
          this.signature=res.data.profile.signature
          this.avatarUrl=res.data.profile.avatarUrl
          this.nickname=res.data.profile.nickname
      });
    }
  },
  mounted() {
    this.getInfo();
    //console.log(this.$store.state.userId)
  }
};
</script>

<style scoped lang='less'>
.myhead {
  display: flex;
  justify-content: center;
  width: 100vw;
  height: 350px;
  align-items: center;
  background-image: url("~@/assets/images/beijing.jpg");
  background-size: cover;
  background-position-x: 50%;
  .imghead {
    text-align: center;
    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 4px solid #fff;
    }
    p {
      color: #fff;
      margin: 0 0;
      text-align: center;
      margin-top: 8px;
    }
    .info {
      text-align: center;
      color: #fff;
      margin-top: 5px;
      span {
        margin: 0 4px;
      }
      p{
          font-family: 'Courier New', Courier, monospace;
          font-size: 14px;
      }
    }
  }
}
</style>